<template>
  <div class="user-card">
    <div class="user-info">
      <img class="avatar" src="@/assets/images/user.png" />
      <button class="login-btn" @click="onLogin">登录</button>
    </div>
    <div class="weather-info">
      <div class="weather-icon">{{ weatherIcon }}</div>
      <div class="weather-details">
        <div class="temperature">{{ temperature }}</div>
        <div class="weather-desc">{{ weatherDesc }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  weatherIcon: string
  temperature: string
  weatherDesc: string
  onLogin: () => void
}>()
</script>

<style scoped lang="scss">
.user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  margin: 32px 16px 24px 16px;
  padding: 28px;
  border-radius: 10px;
  border: 2px solid #e8f2ff;
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.1);
  font-size: 24px;
  .user-info {
    display: flex;
    align-items: center;
    .avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      margin-right: 28px;
    }
    .login-btn {
      background: #409eff;
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 14px 40px;
      font-size: 22px;
      cursor: pointer;
    }
  }
  .weather-info {
    display: flex;
    align-items: center;
    .weather-icon {
      font-size: 32px;
      margin-right: 12px;
    }
    .weather-details {
      text-align: left;
      .temperature {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        line-height: 1;
      }
      .weather-desc {
        font-size: 16px;
        color: #666;
        margin-top: 4px;
      }
    }
  }
}
</style>
